import React,{Component} from 'react';
import './commodityCard.scss';
import {
  Link
} from 'react-router-dom';
import { delCollection } from 'api/user.js';
let startPoint;
let currPoint;
let moveLeng;
export default class ShopCollect extends Component{
	constructor (props) {
		super(props)
		this.state={
			move:{
				transform: 'translate(0,0)'
			}
		}
	}
	start = (e) => {
		startPoint = e.targetTouches[0].pageX;
		// console.log(startPoint)
	}
	move = (e) => {
		currPoint = e.targetTouches[0].pageX;
		moveLeng = currPoint-startPoint;
		this.setState({
			move: {
				transform: 'translate('+moveLeng+',0)'
			}
		})
	}
	end = () => {
		if(moveLeng < -30){
			this.setState({
				move: {
					transform: 'translate(-5rem,0)'
				}
			})
		} else {
			this.setState({
				move: {
					transform: 'translate(0,0)'
				}
			})
		}
	}
	_delCollection () {
		delCollection({
			collect_id: this.props.commodityDetail.favorites_goods_id,
			collect_type: 1
		}).then( res => {
			if( res.code == 1){
				location.reload();
				this.setState({
					move: {
						transform: 'translate(0,0)'
					}
				})
			}
		})
	}
	render(){
		return(
			<div className="commodityCard">
				<Link to={
					{
						pathname: '/company',
						state: {
							shop_id: this.props.commodityDetail.shop_id
						}
					}
				}>
					<p className="commodity_title"><span>{this.props.commodityDetail.shop_name}</span><i className='glyphicon glyphicon-right'></i></p>
				</Link>
				<div className="commodity_con" onTouchStart={this.start} onTouchMove={this.move} onTouchEnd={this.end} style={this.state.move}>
					<Link to={
						{
							pathname: '/shopDetail',
							state: {id: this.props.commodityDetail.common_id}
						}
					}>
						<img src={this.props.commodityDetail.common_image}/>
						<div className="commodity_name">
							<p>{this.props.commodityDetail.common_name}</p>
							{parseInt (this.props.commodityDetail.common_price) === 0 ?
								<span>面议</span>
								: <span>¥ {this.props.commodityDetail.common_price}</span>
							}
						</div>
					</Link>
					<span className="collect_cancel" onClick={this._delCollection.bind(this)}>
						取消<br/>收藏
					</span>
				</div>
				
				
			</div>
		)
	}
}
